<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>接单</title>
    <meta http-equiv="Xpassworpassword-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="css/base.css">
    <link rel="stylesheet" href="css/common.css">
    <link  rel="stylesheet"  href="css/shop-page.css">
</head>
<body class="bgcolor" style="position: relative">
  <div class="orderRecev-box">
    <ul>
        <li>
            <div class="order-receving-li">
                <div class="receving-car-tap">
                    <div class="receving-left">
                        <span class="f16">沪C09675</span>
                        <span class="f12 graycolor">大众帕萨特</span>
                    </div>
                    <div class="receving-right">
                        <span class="pass-orderRecev">接单</span>
                    </div>
                </div>
                <div class="receving-user-content">
                    <p><span>客户</span><span class="receving-user-val">name0090</span></p>
                    <p><span>订单号</span><span class="receving-user-val">12336262626263333</span></p>
                    <p><span>联系方式</span><span class="receving-user-val">13653287698</span></p>
                    <p><span>下单时间</span><span class="receving-user-val">2016-09-25 10:23</span></p>
                </div>
                <div class="receving-pay">
                    <p><span>已付定金</span><span class="receving-pay-val">￥30.00</span></p>
                </div>
            </div>
        </li>
        <li>
            <div class="order-receving-li">
                <div class="receving-car-tap">
                    <div class="receving-left">
                        <span class="f16">沪C09675</span>
                        <span class="f12 graycolor">大众帕萨特</span>
                    </div>
                    <div class="receving-right">
                        <span class="pass-orderRecev">接单</span>
                    </div>
                </div>
                <div class="receving-user-content">
                    <p><span>客户</span><span class="receving-user-val">name0090</span></p>
                    <p><span>订单号</span><span class="receving-user-val">12336262626263333</span></p>
                    <p><span>联系方式</span><span class="receving-user-val">13653287698</span></p>
                    <p><span>下单时间</span><span class="receving-user-val">2016-09-25 10:23</span></p>
                </div>
                <div class="receving-pay">
                    <p><span>已付定金</span><span class="receving-pay-val">￥30.00</span></p>
                </div>
            </div>
        </li>

    </ul>
  </div>
<div class="zhezhao" style="display: none">
    <div class="showkuang">
        <div class="car-select-type" style="margin-top: 15px; margin-bottom: 0;">
            <div class="car-xi-l f14">联系用户</div>
            <div class="car-xi-r">
                <a href="tel:18601613368">18601613368</a>
            </div>
        </div>
        <i>*若车牌号未填写，请致电客户获取车辆信息</i>
        <div class="car-select-pai">
            <div class="car-sheng">
                <div class="car-sheng-l">车牌号</div>
                <div class="car-sheng-r">
                    <span>
                         <i class="f16" id="addCarprvinceText">浙</i><img src="image/xia-more.png">
                    </span>
                </div>
            </div>
            <div class="car-zimu f14">
                <span>
                    <i class="pl5" id="addCarAlphabetText">A</i><img src="image/xia-more.png">
                </span>
            </div>
            <div class="car-number graycolor f14 pl5"><i class="pl5" id="addcarnumber">请输入车牌号</i></div>
        </div>
        <div class="car-select-type">
            <div class="car-xi-l f14">车品牌</div>
            <div class="car-xi-r" id="carbrand">
                <span class="pr5 f14" id="selectCarTypeText">请填写车辆品牌</span><img src="image/more.png" class="car-xi-imgsty">
            </div>
        </div>
        <div class="car-select-type">
            <div class="car-xi-l f14">订单号</div>
            <div class="car-xi-r">
                <input type="text" placeholder="请输入订单后六位">
            </div>
        </div>
        <div class="saveorder">确认</div>
        <div class="giveup">取消</div>
    </div>
    <!--省会简称选择页面-->
    <div class="car-province-box" style="display: none">
        <ul>
            <li>京</li>
            <li>津</li>
            <li>冀</li>
            <li>晋</li>
            <li>蒙</li>
            <li>辽</li>
            <li>吉</li>
            <li>黑</li>
            <li>沪</li>
            <li>苏</li>
            <li>浙</li>
            <li>皖</li>
            <li>闽</li>
            <li>赣</li>
            <li>鲁</li>
            <li>豫</li>
            <li>鄂</li>
            <li>湘</li>
            <li>粤</li>
            <li>桂</li>
            <li>琼</li>
            <li>川</li>
            <li>贵</li>
            <li>云</li>
            <li>渝</li>
            <li>藏</li>
            <li>陕</li>
            <li>甘</li>
            <li>青</li>
            <li>宁</li>
            <li>新</li>
        </ul>
        <div style="clear: both;"></div>
    </div>

    <!--字母选择页面-->
    <div class="car-province-alphabet" style="display: none">
        <ul>
            <li>A</li>
            <li>B</li>
            <li>C</li>
            <li>D</li>
            <li>E</li>
            <li>F</li>
            <li>J</li>
            <li>H</li>
            <li>I</li>
            <li>J</li>
            <li>K</li>
            <li>L</li>
            <li>M</li>
            <li>N</li>
            <li>O</li>
            <li>P</li>
            <li>Q</li>
            <li>R</li>
            <li>S</li>
            <li>T</li>
            <li>U</li>
            <li>V</li>
            <li>W</li>
            <li>X</li>
            <li>Y</li>
            <li>Z</li>
        </ul>
        <div style="clear: both;"></div>
    </div>

    <!--车牌号填写-->
    <div class="car-number-keyboard" style="display: none">

        <div style="clear: both"></div>
        <ul class="chinese-keyboard">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
            <li>0</li>
        </ul>
        <ul class="english-keyboard">
            <li>A</li>
            <li>B</li>
            <li>C</li>
            <li>D</li>
            <li>E</li>
            <li>F</li>
            <li>J</li>
            <li>H</li>
            <li>I</li>
            <li>J</li>
            <li>K</li>
            <li>L</li>
            <li>M</li>
            <li>N</li>
            <li>O</li>
            <li>P</li>
            <li>Q</li>
            <li>R</li>
            <li>S</li>
            <li>T</li>
            <li>U</li>
            <li>V</li>
            <li>W</li>
            <li>X</li>
            <li>Y</li>
            <li>Z</li>
        </ul>
        <button>完成</button>
        <div style="clear: both;"></div>
    </div>
    <!--选择车品牌-->
    <div class="choose-carbrand" style="display: none">
        <div id="letter" ></div>
        <div class="sort_box">
            <div class="sort_list">
                <div class="num_logo">
                    <img src="image/logo.png" alt="">
                </div>
                <div class="num_name">奥迪</div>
            </div>
            <div class="sort_list">
                <div class="num_logo">
                    <img src="image/logo.png" alt="">
                </div>
                <div class="num_name">AC Schnitzer</div>
            </div>
            <div class="sort_list">
                <div class="num_logo">
                    <img src="image/logo.png" alt="">
                </div>
                <div class="num_name">Artega</div>
            </div>
            <div class="sort_list">
                <div class="num_logo">
                    <img src="image/logo.png" alt="">
                </div>
                <div class="num_name">奔驰</div>
            </div>
            <div class="sort_list">
                <div class="num_logo">
                    <img src="image/logo.png" alt="">
                </div>
                <div class="num_name">宝马</div>
            </div>
            <div class="sort_list">
                <div class="num_logo">
                    <img src="image/logo.png" alt="">
                </div>
                <div class="num_name">保时捷</div>
            </div>
            <div class="sort_list">
                <div class="num_logo">
                    <img src="image/logo.png" alt="">
                </div>
                <div class="num_name">宝沃</div>
            </div>
            <div class="sort_list">
                <div class="num_logo">
                    <img src="image/logo.png" alt="">
                </div>
                <div class="num_name">巴博斯</div>
            </div>
            <div class="sort_list">
                <div class="num_logo">
                    <img src="image/logo.png" alt="">
                </div>
                <div class="num_name">大众</div>
            </div>
            <div class="sort_list">
                <div class="num_logo">
                    <img src="image/logo.png" alt="">
                </div>
                <div class="num_name">卡尔森</div>
            </div>
            <div class="sort_list">
                <div class="num_logo">
                    <img src="image/logo.png" alt="">
                </div>
                <div class="num_name">阿尔特</div>
            </div>
            <div class="sort_list">
                <div class="num_logo">
                    <img src="image/logo.png" alt="">
                </div>
                <div class="num_name">本田</div>
            </div>
            <div class="sort_list">
                <div class="num_logo">
                    <img src="image/logo.png" alt="">
                </div>
                <div class="num_name">丰田</div>
            </div>
            <div class="sort_list">
                <div class="num_logo">
                    <img src="image/logo.png" alt="">
                </div>
                <div class="num_name">雷克萨斯</div>
            </div>
            <div class="sort_list">
                <div class="num_logo">
                    <img src="image/logo.png" alt="">
                </div>
                <div class="num_name">铃木</div>
            </div>
            <div class="sort_list">
                <div class="num_logo">
                    <img src="image/logo.png" alt="">
                </div>
                <div class="num_name">朗世</div>
            </div>
            <div class="sort_list">
                <div class="num_logo">
                    <img src="image/logo.png" alt="">
                </div>
                <div class="num_name">马自达</div>
            </div>
            <div class="sort_list">
                <div class="num_logo">
                    <img src="image/logo.png" alt="">
                </div>
                <div class="num_name">讴歌</div>
            </div>
            <div class="sort_list">
                <div class="num_logo">
                    <img src="image/logo.png" alt="">
                </div>
                <div class="num_name">日产</div>
            </div>
            <div class="sort_list">
                <div class="num_logo">
                    <img src="image/logo.png" alt="">
                </div>
                <div class="num_name">三菱</div>
            </div>

            <div class="sort_list">
                <div class="num_logo">
                    <img src="image/logo.png" alt="">
                </div>
                <div class="num_name">斯巴鲁</div>
            </div>
            <div class="sort_list">
                <div class="num_logo">
                    <img src="image/logo.png" alt="">
                </div>
                <div class="num_name">别克</div>
            </div>
            <div class="sort_list">
                <div class="num_logo">
                    <img src="image/logo.png" alt="">
                </div>
                <div class="num_name">道奇</div>
            </div>
            <div class="sort_list">
                <div class="num_logo">
                    <img src="image/logo.png" alt="">
                </div>
                <div class="num_name">福特</div>
            </div>
            <div class="sort_list">
                <div class="num_logo">
                    <img src="image/logo.png" alt="">
                </div>
                <div class="num_name">GMC</div>
            </div>
            <div class="sort_list">
                <div class="num_logo">
                    <img src="image/logo.png" alt="">
                </div>
                <div class="num_name">凯迪拉克</div>
            </div>
            <div class="sort_list">
                <div class="num_logo">
                    <img src="image/logo.png" alt="">
                </div>
                <div class="num_name">Jeep</div>
            </div>
            <div class="sort_list">
                <div class="num_logo">
                    <img src="image/logo.png" alt="">
                </div>
                <div class="num_name">雪佛兰</div>
            </div>
            <div class="sort_list">
                <div class="num_logo">
                    <img src="image/logo.png" alt="">
                </div>
                <div class="num_name">特斯拉</div>
            </div>
            <div class="sort_list">
                <div class="num_logo">
                    <img src="image/logo.png" alt="">
                </div>
                <div class="num_name">林肯</div>
            </div>
            <div class="sort_list">
                <div class="num_logo">
                    <img src="image/logo.png" alt="">
                </div>
                <div class="num_name">++</div>
            </div>
        </div>
        <div class="initials">
            <ul>

            </ul>
        </div>
    </div>
</div>

</body>
<script src="config/jquery-2.1.4.min.js"></script>
<script src="config/jquery.charfirst.pinyin.js"></script>
<script src="js/sort.js"></script>
<script>
    $(function () {
        $('.pass-orderRecev').click(function () {
           $('.zhezhao').show();
           $('.zhezhao').height($('body').height());
        });


//选择省会简称
        $('.car-sheng-r').click(function () {
            $('.car-province-alphabet').hide();//隐藏字母选择框
            $('.car-number-keyboard').hide();//隐藏车牌号码选择框
            $('.choose-carbrand').hide();//隐藏车品牌选择框
            $('.car-province-box').show();//显示省会简称选择框
        });
        $('.car-province-box ul li').click(function () {
            $('#addCarprvinceText').html($(this).html());
            $('.car-province-box').hide();//隐藏省会简称选择框
        });

//选择字母
        $('.car-zimu').click(function () {
            $('.car-number-keyboard').hide();//隐藏车牌号码选择框
            $('.choose-carbrand').hide();//隐藏车品牌选择框
            $('.car-province-box').hide();//隐藏省会简称选择框
            $('.car-province-alphabet').show();//显示字母选择框
        });
        $('.car-province-alphabet ul li').click(function () {

            $('#addCarAlphabetText').html($(this).html());
            $('.car-province-alphabet').hide();//隐藏字母选择框
        });

//填写车牌号
        $('.car-number').click(function () {
            $('.choose-carbrand').hide();//隐藏车品牌选择框
            $('.car-province-box').hide();//隐藏省会简称选择框
            $('.car-province-alphabet').hide();//隐藏字母选择框
            $('#addcarnumber').html('');
            $('.car-number-keyboard').show();//显示车牌号码选择框
            $('.zhezhao').height('1000');
        });
        $('.car-number-keyboard ul li').click(function () {
            var oldnumber = $('#addcarnumber').html();
            $('#addcarnumber').html(oldnumber + $(this).html()).css({'color':'#343434'});
        });
        $(".car-number-keyboard button").click(function () {
            $('.car-number-keyboard').hide();//字母选择列表隐藏
        });

//选择车品牌
        $('#carbrand').click(function () {
            $('.showkuang').hide();
            $('.car-province-box').hide();//隐藏省会简称选择框
            $('.car-province-alphabet').hide();//隐藏字母选择框
            $('.car-number-keyboard').hide();//隐藏车牌号码选择框
            $('.choose-carbrand').show();//显示车品牌选择框
        });
        $('.sort_list').click(function () {
            var carbrand = $(this).children('.num_name').html();
            $('#carbrand span').html(carbrand).css({'color':'#343434'});//将选中的品牌填入输入框
            $('.choose-carbrand').hide();//车牌号选择框隐藏
            $('.showkuang').show();
        });

//确定订单
        $('.zhezhao .saveorder').click(function () {
            $('.zhezhao').hide();
        });
        $('.zhezhao .giveup').click(function () {
            $('.zhezhao').hide();
        });
    })
</script>
</html>